<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<link href="css/box.css" rel="stylesheet"/>
	</head>
	<body>
		<!-- 盒子模型
		内容content
		内边距padding：会把盒子撑大
		边框border
		外边框margin
		 margin:盒子与盒子之间的距离-->外边距的作用
		<div class="hz">hello box</div>
		<style type="text/css">
			.hz{
				width: 300px;/* 盒子的宽 */
				height: 450px;/* 盒子的高 */
				padding: 10px 30px 50px 60px;/* 上右下左 */
				/* padding:三个值 上 左右 下
				padding:两个值 左右 上下 */
				margin: auto;
			}
		</style>
		<div class="box2">
			hello box2
		</div>
		<style type="text/css">
			.hz2{
				padding: 10px 30px 50px 60px;
				margin:auto;}
		</style>
	</body>
</html>
